<header>
  <nav class="js-navbar-scroll navbar">
    <a class="navbar-brand" href="{{ site.baseurl }}/{{linkUrlSelected}}">
      <div class="navbar-logo">
        {% include svg/meshery-docs.html %}
      </div>
      <div class="mobile">
        {% include svg/meshery-logo.html %}
      </div>
    </a>

    <div id="main_navbar">
      <ul class="navbar-nav">
        <!-- {% if site.repo %}
			<li class="nav-item">
        <a class="nav-link" href="{{ site.repo }}" target="_blank"><span>GitHub</span></a>
      </li>{% endif %}  -->

        <!-- Internal links -->
        {% for link in site.data.navigation %}
        <li class="nav-item">
          <a
            class="nav-link"
            href="{% if link.url %}{{ site.baseurl }}/{{ link.url }}{% else %}{{ link.external_url }}{% endif %}"
            ><span>{{ link.title }}</span></a
          >
        </li>
        {% endfor %}
        
        <a href="https://play.meshery.io">
          <div class="nav-btn">Playground</div>
        </a>
        <!--Version Selector -->
        <select
          onchange="window.location=this.value"
          class="appearance-none flex-1 w-full px-0 py-1 placeholder-gray-900 tracking-wide focus:outline-none version-selector"
          name="versioningSelection"
          id="versioningSelection"
        >
          <!-- <option value="">Versions</option> -->
          {% assign versions = site.data.versions %} {% for link in versions%} {%- capture linkUrl -%}/{{link.url}}/{%-
          endcapture -%}
          <!-- we get the version selected, and put it to the right option  -->
          {%- if page.url==linkUrl or page.url contains linkUrl -%} {%- assign optionSelected = "selected" -%} {%-
          assign linkUrlSelected = linkUrl -%} {%- else -%} {%- assign optionSelected = "" -%} {%- endif -%}
          <option
            {{optionSelected}}
            value="{% if link.url %}{{ site.baseurl }}/{{ link.url }}{% endif %}"
            class="nav-item mr-4 mb-2 mb-lg-0 text-black"
          >
            <span>{{ link.version }}</span>
          </option>
          {% endfor %}
        </select>
      </ul>
    </div>

    <div class="icon-container">
      <button class="nav-toggle-btn nav-toggle-btn--main">
        <svg
          id="menu-nav-toggle-btn"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-menu"
        >
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </button>
      <button class="nav-mode-icon" id="mode-toggle-btn" style="text-align: center">
        <img class="nav-text" id="logo-dark-light" src="{{ site.baseurl }}/assets/img/nav-icons/mode-toggle-icon-moon.png" 
        data-logo-for-dark="{{ site.baseurl }}/assets/img/nav-icons/mode-toggle-icon-moon.png"
        data-logo-for-light="{{ site.baseurl }}/assets/img/nav-icons/mode-toggle-icon-sun.png"
        />
      </button>
    </div>

    <!--Search Bar
    <div class="navbar-nav d-none d-lg-block"><input type="search" class="form-control td-search-input" placeholder="&#xf002 Search this site…" aria-label="Search this site…" autocomplete="off"></div>-->

    <!-- meshery-custom-begin
	<div class="navbar-nav d-none d-lg-block">
          <a class="gh-source" data-gh-source="github" href="{{ site.repo }}" title="Go to repository" data-md-state="done">
          <div class="gh-source__repository">
            <i class="fab fa fa-github fa-2x" style='padding-right:20px; float:left; margin-top:5px'></i>
            {{ site.github_user }}/{{ site.github_repo }}
          <ul class="gh-source__facts"><li class="gh-source__fact" id='stars'></li><li id="forks" class="gh-source__fact"></li></ul></div></a>
        </div>
      </div>
meshery-custom-end -->
  </nav>
</header>

<!-- meshery-custom-begin
<script>
$(document).ready(function() {
  var url = "https://api.github.com/search/repositories?q={{ site.github_user }}/{{ site.github_repo }}";
  fetch(url, { 
      headers: {"Accept":"application/vnd.github.preview"}
  }).then(function(e) {
    return e.json()
  }).then(function(r) {
     console.log(r.items[0])
     stars = r.items[0]['stargazers_count']
     forks = r.items[0]['forks_count']
     $('#stars').text(stars + " Stars")
     $('#forks').text(forks + " Forks")
  });
});
</script>
meshery-custom-end -->

